<template>
	<view class="ownermsg">
		<form @submit="formSubmit" @reset="">
			<view class="message">
				<view class="msg">
					<text><text class="required">*</text>申请人姓名</text>
					<input class="uni-input" name="realname" placeholder="必填项" />
				</view>
				<view class="msg">
					<text><text class="required">*</text>店铺名称</text>
					<input class="uni-input" name="shopname" placeholder="必填项" />
				</view>
				<view class="desc">
					<text>店铺简介</text>
					<textarea class="uni-input" name="shopdesc" placeholder="请填写店铺简介" maxlength="100"/>
				</view>
				
				<view class="msg">
					<text class="tit">所在地址</text>
				<!-- 	<input class="input" @change="getaddress" type="text" v-model="address" placeholder="请填写地址" placeholder-class="placeholder" />
					<text @click="chooseLocation" class="addressclass">
						<text class="yticon icon-shouhuodizhi"></text>点击选择
					</text> -->				
						<text @tap="toggleTab('region')" class="input"  @change="getaddress" v-model="address">{{ addressData.province + addressData.city  }}</text>
						<w-picker mode="region" :defaultVal="regionDval" :areaCode="['33', '3301', '330108']" :hideArea="true" @confirm="onConfirm" ref="region" :timeout="true"></w-picker>
						<!-- <text class="yticon icon-shouhuodizhi"></text> -->
				</view>
				<view class="msg">
					<text><text class="required">*</text>手机号码</text>
					<input class="uni-input phone" name="phone" type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange"/>
					<button class="code" @click="getcode()" :disabled="popup">{{btntxt}}</button>
				</view>
				<view class="msg">
					<text><text class="required">*</text>验证码</text>
					<input class="uni-input" name="code" type="number"  placeholder="请输入验证码"  @input="inputChange"  />
				</view>
			</view>
			
			<button form-type="submit">提交申请资料</button>
		</form>
			<!-- <van-field label="申请人" placeholder="请填写申请人姓名" />
			<van-field label="店铺名称" placeholder="请填写店铺名称" :value="item.shop_name" />
			<van-field value="11" label="留言" type="textarea" placeholder="请输入留言" autosize />
		    <button @click="storeapply">提交申请资料</button> -->
	</view>
</template>

<script>
	import {getOne,postOne,msg} from '../../api/publicapi.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	
	export default {
		components:{
			wPicker
		},
		data() {
			return {
				owner: [],
				popup: false,
				mobile: '',
				mobilecode: '',
				btntxt:'获取验证码',
				time: 60,
				province: '',
				city: '',
				address: '',
                id:1,
				addressData: {
					id: '',
					username: '',
					phone: '',
					province: '点击选择地址',
					city: '',
					area: '',
					address: '',
					area: '',
					post: '000000',
					default: false
				},
				addlist: [],
				regionDval: ['北京市', '市辖区', '东城区'],
				isDisplay: false
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// chooseLocation(){
			// 	uni.showActionSheet({
			// 	    itemList: [['A','d'], 'B', 'C'],
			// 	    success: function (res) {
			// 	        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			// 	    },
			// 	    fail: function (res) {
			// 	        console.log(res.errMsg);
			// 	    }
			// 	})
			//   //   uni.chooseLocation({
			// 		// success: (data)=> {
			// 		// 	//console.log(data)
			// 		// 	let  reg = /.+?(省|市)/g;
			// 		// 	//console.log(data.address.match(reg))
			// 		// 	this.inputclass = false;
			// 		// 	this.province = data.address.match(reg)[0];
			// 		// 	this.city = data.address.match(reg)[1];
			// 		// 	this.address = data.address.match(reg)[0] + data.address.match(reg)[1];
			// 		// },
			// 		// fail:(res)=>{
			// 		//     if(res.errMsg = "chooseLocation:fail auth deny"){
			// 		//         msg('未授权获取地理位置，详细地址请填写省市')
			// 		//     }
					    
			// 		// },
			//   //   })
			// },
			getaddress(){
			    let  reg = /.+?(省|市)/g;
			        
			    let addlist = this.address.match(reg)
			    if(addlist[0]!==undefined){
			        this.province = addlist[0]
			    }
			    if(addlist[1]!==undefined){
			        this.city = addlist[1]
			    }
				console.log(this.province)
			    console.log(this.city)
				
			},
			inputChange(e){
				console.log(e)
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			getcode(){
				
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))){ 
					msg('请输入正确的手机号码');
					this.navBack()
				} 
				let data = {
					'phone':this.mobile
				}
				postOne('front/phonecode',data).then(res => {
					if(res.error_code === 0){
						this.timer()
						msg('已发送');
					}
				})
			},
			timer () {
				if (this.time > 0) {
					this.popup = true
					this.time--
					this.btntxt = this.time + 's'
					setTimeout(this.timer, 1000)
			    } else {
					this.popup = false
					this.time = 60
					this.btntxt = '获取验证码'
				}
			},
			formSubmit: function (e) {
				let data = {
					'shop_phone' :e.detail.value.phone, 
					'shop_name' :e.detail.value.shopname,
					'shop_desc' :e.detail.value.shopdesc,
					'province' :this.province,
					'city' :this.city,
					'code' :e.detail.value.code,
					'id' : this.id,
					'whether' : true,
				}
				//console.log(data);
				if(data.shop_name===''&&data.code===''){
					uni.showToast({
						title:'请检查必填项',
						icon:"none"
					})
				}else{
					postOne('front/storeapply', data).then(res => {
						
						if(res.status_code == 200){
							uni.showModal({
							    content: res.message,
								showCancel: false,
							    success: function (res) {
							        if (res.confirm) {
										uni.switchTab({
										    url: '/pages/user/user'
										});
							            //console.log('用户点击确定');
							        } else if (res.cancel) {
							            //console.log('用户点击取消');
							        }
							    }
							});
						}else{
							msg(res.message)
						}
						
					})	
				}	
			},
			toggleTab(str) {
				console.log('str',str,this.$refs)
				this.$refs[str].show()
			},
			onConfirm(val) {
				console.log(val);
				//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
				// switch(this.mode){
				// 	case "date":
				// 		break;
				// }
				let addlist = val.checkArr
				if (addlist[0] !== undefined) {
					this.addressData.province = addlist[0];
				}
				if (addlist[1] !== undefined) {
					this.addressData.city = addlist[1];
				}
				if (addlist[2] !== undefined) {
					this.addressData.area = addlist[2];
				}
			}

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.ownermsg{
		.message{
			background-color: #FFF;
			font-size: 30upx;
			.desc{
				height: 180upx;
				width: 92%;
				margin: auto;
				border-bottom: 1px solid #f7f7f7;
				text{
					width: 28%;
					display: block;
					line-height: 60upx;
				}
				textarea{
					height: 120upx;
				}
			}
			.msg{
				display: flex;
				justify-content: flex-start;
				height: 80upx;
				line-height: 80upx;
				width: 92%;
				margin: auto;
				border-bottom: 1px solid #f7f7f7;
				.phone{
					width: 40%;
				}
				.code{
					margin: 10upx;
					height: 60upx;
					color: #d23931;
					line-height: 56upx;
					width: 194upx;
					font-size: 0.7rem;
					border-radius: 45upx;
					background-color: #FFF;
					border: 1px solid #d23931
				}
				text{
					width: 28%;
				}
				.addressclass{
					color: #a29e9e;
				}
				.input{
					width: 45%;
				}
				input{
					height: 100%;
				}
			}
		}
		
		button{
			margin-top: 50upx;
			width: 80%;
			height: 74upx;
			line-height: 74upx;
			font-size: 32upx;
			color: #FFF;
			background-color: #d23831;
		}
	}
	.required{
		color: #FF0000;
	}
</style>